<template>
  <div class="table-container">
    <!--    搜索区域-->
    <div v-if="isSearch" :class=" [searchAnimate ? 'animated bounceInRight':' animated bounceOutRight'] "
         class="table-container-search  ">
      <el-form ref="ruleForm" label-width="80px">
        <div class="table-container-search-item">
          <div v-for="(item, key) in ruleForm" :key="key">
            <!--            文本类型-->
            <div v-if="item.type === 'text'">
              <el-form-item :label="item.label">
                <el-input v-model="item[item['prop']]" clearable/>
              </el-form-item>
            </div>
            <!--            end-->

            <!--            下拉框-->
            <div v-if="item.type === 'select'">
              <el-form-item :label="item.label">
                <el-select
                  v-model="item[item['prop']]"
                  clearable
                  placeholder="请选择下面内容"
                >
                  <el-option
                    v-for="(t, i) in item.select"
                    :key="i"
                    :label="t.label"
                    :value="t.value"
                  />
                </el-select>
              </el-form-item>
            </div>
            <!--            end-->

            <!--            时间范围-->
            <div v-if="item.type === 'time'">
              <el-form-item :label="item.label">
                <el-date-picker
                  v-model="item[item['prop']]"
                  clearable
                  type="datetimerange"
                  value-format="timestamp"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="right"
                />
              </el-form-item>
            </div>
            <!--            end-->

            <!--            单选-->
            <div v-if="item.type === 'radio'">
              <el-form-item :label="item.label">
                <el-radio-group v-model="item[item['prop']]" size="mini">
                  <el-radio-button
                    v-for="(t, k) in item.select"
                    :key="k"
                    :label="t.value"
                  >
                    {{ t.label }}
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
            </div>
            <!--            end-->
            <!--            价钱类型-->
            <div v-if="item.type === 'price'">
              <el-form-item :label="item.label">
                <el-col :span="5">
                  <el-input v-model="item.left" clearable/>
                </el-col>
                <el-col style="text-align: center" class="line" :span="2">
                  -
                </el-col>
                <el-col :span="5">
                  <el-input v-model="item.right"/>
                </el-col>
              </el-form-item>
            </div>
            <!--            end-->

            <!--            自定义-->
            <div v-if="item.type === 'slot'">
              <slot :name="item.slot"/>
            </div>
            <!--            end-->
          </div>
          <div style="margin-left: 20px">
            <el-button type="primary" @click="searchForm()">搜索</el-button>
            <el-button @click="resetForm()">重置</el-button>
          </div>
        </div>
      </el-form>
    </div>
    <!--    end-->
    <!--    基础按钮-->
    <div class="table-container-button">
      <!--      left 编辑框-->
      <div>
        <el-tooltip
          class="item"
          effect="dark"
          content="点我刷新"
          placement="top-start"
        >
          <el-button
            type="primary"
            icon="el-icon-refresh"
            @click="handleHeardRefresh"
          />
        </el-tooltip>
        <el-button
          v-show="!optionsData.buttonAdd"
          v-if="Authpermission('添加')" type="primary" icon="el-icon-plus" @click="handleHeardAdd">
          添加
        </el-button>
        <el-button
          v-if="false"
          :disabled="isDisabledEdit"
          type="primary"
          icon="el-icon-edit"
          @click="handleHeardEdit"
        >
          编辑
        </el-button>
        <el-popconfirm
          style="margin-left: 10px"
          confirm-button-text="好的"
          cancel-button-text="不用了"
          icon="el-icon-info"
          icon-color="red"
          :title="`确定要删除选择的${allData.length}条内容吗？`"
          @confirm="handleHeardDel"
        >
          <el-button
            v-show="!optionsData.buttonEdit"
            v-if="Authpermission('批量删除')"
            slot="reference"
            :disabled="isDisabledDel"
            type="danger"
            icon="el-icon-delete-solid"
          >
            删除
          </el-button>
        </el-popconfirm>
        <el-popconfirm
          confirm-button-text="好的"
          cancel-button-text="不用了"
          icon="el-icon-info"
          icon-color="red"
          :title="`确定要导出选择的${allData.length}条内容吗？`"
          @confirm="handleHeardSelect"
        >
          <el-button
            v-if="optionsData.buttonSelect"
            style="margin-left: 10px"
            slot="reference"
            :disabled="isDisabledDel"
            type="warning"
            icon="el-icon-question"
          >
            选择导出
          </el-button>
        </el-popconfirm>

        <el-popconfirm
          style="margin-left: 10px"
          v-if="optionsData.buttonBatch"
          confirm-button-text="好的"
          cancel-button-text="不用了"
          icon="el-icon-info"
          icon-color="red"
          :title="`确定要导出${pagination.total}条内容吗？`"
          @confirm="handleHeardBatch"
        >

          <el-button
            :disabled='batch.batchExcelStatus'
            slot="reference"
            type="success"
            icon="el-icon-info"
          >
            批量导出
          </el-button>
        </el-popconfirm>

        <el-button
          @click="handleAddUserHeard"
          class="buttonHeard"
          v-if="optionsData.buttonHeard"
          style="margin-left: 10px"
          :disabled='batch.batchExcelStatus'
          type="primary"
          icon="el-icon-picture-outline-round"
        >
          导入头像
        </el-button>

        <el-button
          :disabled='batch.batchFaceStatus'
          @click="handleAddUserFace"
          class="buttonHeard"
          v-if="optionsData.buttonFace"
          style="margin-left: 10px"
          type="info"
          icon="el-icon-s-check"
        >
          同步人脸库
        </el-button>
      </div>


      <!--      end-->
      <!--      right 数据框-->
      <div class="table-container-button-right">
        <div v-if="isShowDataTime">
          <span style="margin-right: 20px">创建时间</span>
          <el-date-picker
            v-model="dataTime"
            type="datetimerange"
            value-format="timestamp"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            @change="handleCreateTimeChange"
          />
        </div>
        <div style="margin-right: 5px">
          <el-input
            v-model="searchInput"
            placeholder="搜索"
            clearable
            @input="serchChangeInput"
          />
        </div>
        <el-button-group>
          <el-popover
            style="min-width: 100px;margin-right: 5px"
            placement="bottom-start"
            trigger="click"
          >
            <div
              style="display: flex; flex-direction: column; margin-left: 25px"
            >
              <el-checkbox
                v-for="(t, k) in options.fields"
                :key="k"
                style="margin-bottom: 6px"
                :label="t.label"
                :checked="t.select"
                @change="ValueChange(t, k)"
              />
            </div>

            <el-button slot="reference" type="primary" icon="el-icon-menu"/>
          </el-popover>
          <el-button
            v-if="Authpermission('查询')"
            style="margin-right: 5px"
            type="primary"
            icon="el-icon-search"
            @click="clickSearch"
          />
          <el-popover
            style="min-width: 100px"
            placement="bottom-start"
            trigger="click"
          >
            <div
              style="
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
              "
            >
              <div @click="onExcelClick" class="pullData">Excel</div>
            </div>
            <el-button
              v-if="optionsData.buttonExcel"
              slot="reference"
              type="primary"
              icon="el-icon-s-promotion"
            />
          </el-popover>
        </el-button-group>
      </div>
      <!--      end-->
    </div>
    <!--    end-->

    <!--    表单-->
    <el-table
      id="table"
      ref="Table"
      :data="tableData"
      style="width: 100%"
      stripe
      border
      v-loading="loading"
      row-key="id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      :row-style="{ height: '40px' }"
      :cell-style="{ padding: '0' }"
      :header-row-style="{ height: '40px' }"
      :header-cell-style="{ padding: '0', backgroundColor: '#eef1f6' }"
      element-loading-text="数据正在加载中..."
      empty-text="暂无数据"
      highlight-current-row
      @selection-change="handleSelectionChange"
      @current-change="handleCurrentChange"
    >
      <template v-for="(item, key, index) in options.fields">
        <!--       多选-->
        <template v-if="index === 0">
          <el-table-column
            :reserve-selection="true"
            align="center" type="selection"/>
        </template>
        <!--        end-->

        <!--        编辑按钮-->
        <template v-if="item.type === 'func' && item.select">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :align="item.align ? item.align : 'center'"
            :fixed="item.fixed"
            :sortable="item.order"
          >
            <template slot-scope="scope">
              <div @click.stop>
                <el-button
                  :style="item.options ? 'margin-right: -5px':'margin-right: 10px' "
                  v-if="Authpermission('编辑')"
                  v-show="!item.buttonEdit  "
                  type="text"
                  size="small"
                  @click.stop="item.edit(scope)"
                >
                  编辑
                </el-button>
                <template v-if="item.options">
                  <el-button
                    v-for="(t,i) in item.options"
                    :key="i"
                    style="margin-right: 5px"
                    type="text"
                    size="small"
                    @click.stop="t[Object.keys(t)[1]](scope)"
                  >
                    {{ t.label }}
                  </el-button>
                </template>
                <el-popover
                  :ref="`popover_${scope.$index}`"
                  placement="top"
                  trigger="click"
                  width="160"
                >
                  <p>确定要删除吗？</p>
                  <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="closePopover(scope.$index)">
                      取消
                    </el-button>
                    <el-button
                      type="primary"
                      size="mini"
                      @click.stop="item.del(scope)"
                      @click="closePopover(scope.$index)"
                    >
                      确定
                    </el-button>
                  </div>
                  <el-button v-show="!item.buttonDel" v-if="Authpermission('删除')" slot="reference" type="text"
                             size="small">
                    删除
                  </el-button>
                </el-popover>
              </div>

            </template>
          </el-table-column>
        </template>
        <!--        编辑按钮end-->

        <!--        switch-->
        <template v-if="item.type === 'switch' && item.select">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :align="item.align ? item.align : 'center'"
            :fixed="item.fixed"
            :sortable="item.order"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <div @click.stop>
                <el-switch
                  v-model="scope['row'][item.prop]"
                  :active-value="item.activeValue"
                  :inactive-value="item.inactiveValue"
                  @change="item.switchChage(scope)"
                />
              </div>
            </template>
          </el-table-column>
        </template>
        <!--        end-->

        <!--       文字搜索状态 类型-->
        <template v-if="item.type === 'statusText' && item.select">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :align="item.align ? item.align : 'center'"
            :fixed="item.fixed"
            :sortable="item.order"
          >
            <template slot-scope="scope">
              <div style="display: flex;align-items: center;justify-content: center" @click.stop>
                <div v-if="scope['row'][item.prop] === item.options[0].value"
                     :style="`width: 10px;height: 10px;border-radius: 100%;background-color:${item.options[0].color}`">
                </div>
                <div v-if="scope['row'][item.prop] === item.options[1].value"
                     :style="`width: 10px;height: 10px;border-radius: 100%;background-color:${item.options[1].color}`">
                </div>
                <el-tooltip v-if="scope['row'][item.prop] === item.options[0].value" class="item" effect="dark"
                            :content="`点击搜索 ${item.options[0].label}`" placement="top">
                  <div :style="`margin-left: 5px;color:${item.options[0].color};cursor: pointer`"
                       @click="searchStatusText(scope)">
                    {{ item.options[0].label }}
                  </div>
                </el-tooltip>
                <el-tooltip v-if="scope['row'][item.prop] === item.options[1].value" class="item" effect="dark"
                            :content="`点击搜索 ${item.options[1].label}`" placement="top">
                  <div :style="`margin-left: 5px;color:${item.options[1].color};cursor: pointer`"
                       @click="searchStatusText(scope)">
                    {{ item.options[1].label }}
                  </div>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </template>

        <!--        end-->

        <!--        图片组显示   -->
        <template v-if="item.type === 'image' && item.select">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :align="item.align ? item.align : 'center'"
            :fixed="item.fixed"
            :sortable="item.order"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <div
                style="display: flex; flex-wrap: wrap; justify-content: center"
              >
                <div
                  v-for="(v, i) in burstImageString(
                    scope['row'][item.prop],
                    options.baseUrl,
                    (sing = item.sing)
                  )"
                  :key="i"
                  style="margin-left: 5px; margin-top: 8px"
                >
                  <el-image
                    lazy
                    :style="item.style"
                    :src="v"
                    fit="cover"
                    :preview-src-list="
                      burstImageString(
                        scope['row'][item.prop],
                        options.baseUrl,
                        (sing = item.sing)
                      )
                    "
                    @click.stop="item.preview(scope, v, i)"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"/>
                    </div>
                  </el-image>
                </div>
              </div>
            </template>
          </el-table-column>
        </template>
        <!--        图片end-->

        <!--        标签  -->
        <template v-if="item.type === 'tag' && item.select">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :align="item.align ? item.align : 'center'"
            :fixed="item.fixed"
            :sortable="item.order"
            :filters="item.tagDate"
            :filter-method="item.filterTag"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <div v-if="item.options">
                <div
                  v-for="(t,i) in item.options"
                  :key="i"
                >
                  <el-tag
                    v-if="t.label === scope['row'][item.prop]"
                    :type="t.label === scope['row'][item.prop] ? t.attr : 'danger' "
                    :effect="item.effect"
                  >
                    {{ scope["row"][item.prop] }}
                  </el-tag>
                </div>
              </div>
              <div v-if="!item.options">
                <el-tag
                  :type="item.attr === 'primary' ? '' : item.attr"
                  :effect="item.effect"
                >
                  {{ scope["row"][item.prop] }}
                </el-tag>
              </div>
            </template>
          </el-table-column>
        </template>
        <!--        end-->

        <!--        href （链接）  -->
        <template v-if="item.type === 'link' && item.select">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :align="item.align ? item.align : 'center'"
            :fixed="item.fixed"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-link type="primary" @click="item.linkClick(scope)">
                {{ scope["row"][item.prop] }}
              </el-link>
            </template>
          </el-table-column>
        </template>
        <!--        end-->

        <!--        进度条  -->
        <template v-if="item.type === 'progress' && item.select">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :align="item.align ? item.align : 'center'"
            :fixed="item.fixed"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-progress :percentage="scope['row'][item.prop]"/>
            </template>
          </el-table-column>
        </template>
        <!--        end-->

        <!--       有嵌套对象类型 -->
        <template v-if="item.type === 'two' && item.select">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :align="item.align ? item.align : 'center'"
            :fixed="item.fixed"
            :sortable="item.order"
            :filters="item.tagDate"
            :filter-method="item.filterTag"
            show-overflow-tooltip
          >
            {{ item }}
            <template slot-scope="scope">
              <div v-if="scope.row[item.options.obj]">{{ scope["row"][item.options.obj][item.options.objKey] }}</div>
            </template>
          </el-table-column>
        </template>
        <!--        end-->

        <!--        自定义-->
        <slot v-if="item.slot && item.select" :name="item.slot"/>
        <!--        end-->

        <!--        正常这段渲染-->
        <template v-if="!item.type && item.select">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :align="item.align ? item.align : 'center'"
            :fixed="item.fixed"
            :sortable="item.order"
            show-overflow-tooltip
          />
        </template>
        <!--        end-->
      </template>
    </el-table>
    <!--    end-->

    <!--    分页-->
    <div v-if="isPage" class="table-container-pagination">
      <el-pagination
        background
        :current-page="pagination.currentPage"
        :page-sizes="pagination.pageSizes"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handlePaginationSizeChange"
        @current-change="handlePaginationCurrentChange"
      />
    </div>
    <!--    end-->


    <!--    弹窗区域-->
    <el-dialog
      v-dialog-drag
      title="批量导入"
      :visible.sync="excelShow"
      :close-on-click-modal="false"
      width="55%"
    >
      <div class="container-dialer">
        <div class="container-dialer-enter">
          <div class="container-dialer-enter-item"></div>
          <span>导入数据</span>
        </div>
        <div class="container-dialer-enter-content">
          <div style="display: flex;align-items: center;justify-content: space-around">

            <div
              @click="downloadTemplate"
              style="display:flex;align-items: center;flex-direction: column;justify-content: center;cursor: pointer">
              <div>
                <img style="height: 80px;width: 80px" src="../assets/excel.png">
              </div>
              <div style="font-weight: bold;margin-left: 15px;font-size: 18px">
                下载模板
              </div>
            </div>

            <div style="margin-left: 20px">
              <img style="height: 60px;width: 60px" src="../assets/right-arr.png" alt="">
            </div>

            <div>
              <div>
                <el-upload
                  class="upload-demo"
                  drag
                  :on-success="onUploadSuccess"
                  :on-error="onUploadError"
                  :headers={website:$store.state.user.website}
                  :action="optionsData.uploadUrl || '' "
                >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                </el-upload>
              </div>

            </div>

          </div>
        </div>
      </div>
    </el-dialog>
    <!--    end-->

  </div>
</template>

<script>
export default {
  name: "XTable",
  props: {
    loading: {
      type: Boolean,
      default: true
    },
    tableData: {
      type: Array,
      default: Array
    },
    optionsData: {
      type: Object,
      default: Object
    },
    ruleForm: {
      type: Object,
      default: Object
    },
    isPage: {
      type: Boolean,
      default: true
    },
    batch: {
      type: Object,
      default: Object
    },
    pagination: {
      type: Object,
      default: function () {
        return {
          currentPage: 1, //当前页
          pageSizes: [10, 20, 50, 100],
          pageSize: 20,
          total: 100
        };
      }
    }
  },
  data() {
    return {
      excelShow: false,//显示导入导出弹窗
      permission: [],//权限
      searchAnimate: false,//动画开关
      searchVal: {},//搜索框值
      isShowDataTime: false,
      allData: [], //表单数据选中的值
      ruleForms: {}, //搜索表单
      ruleFormsCopy: {}, //用于清空数据
      dataTime: null, //查询时间
      isSearch: false, //搜索模块 开关
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }, //时间回调函数
      // ruleForms:{
      //   id: {label:'ID',prop:'id',type:'text'},
      //   tag:{label:'标签',prop:'tag',select:[{label:'标签一',value:'oen'},{label:'标签二',value:'two'}],type:'select'},
      // },
      options: {}, //表头数据
      searchInput: "", //搜索框
      isDisabledEdit: true, //编辑按钮 状态
      isDisabledDel: true //删除按钮 状态
      //列示数据 从父组件传入
      // tableData: [
      //   {
      //     id: 1,
      //     date: '2016-05-02',
      //     name: '王小虎',
      //     address: '上海市普陀区金沙江路 1518 弄',
      //     tag: '公司',
      //     status: false,
      //     link:'https://element.eleme.cn',
      //     progress:60
      //   },
      //   {
      //     id: 2,
      //     date: '2016-05-04',
      //     name: '王小虎',
      //     address: '上海市普陀区金沙江路 1517 弄',
      //     tag: '公司',
      //     status: true,
      //     url: '/uploads/20211120/9c50f81a7c50af6430496515d802b5d4.png,/uploads/20211120/9c50f81a7c50af6430496515d802b5d4.png',
      //     link:'https://element.eleme.cn',
      //     progress:20
      //   },
      //   {
      //     id: 3,
      //     date: '2016-05-01',
      //     name: '王小虎',
      //     address: '上海市普陀区金沙江路 1519 弄',
      //     tag: '家',
      //     status: 0,
      //     url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      //     link:'https://element.eleme.cn',
      //     progress:100
      //   },
      //   {
      //     id: 4,
      //     date: '2016-05-03',
      //     name: '王小虎',
      //     address: '上海市普陀区金沙江路 1516 弄',
      //     tag: '家',
      //     status: 1,
      //     url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      //     link:'https://element.eleme.cn',
      //     progress:50
      //
      //   },
      // ],//表单数据
      // ruleForms:{
      //   id: {label:'ID',prop:'id',type:'text'},
      //   tag:{label:'标签',prop:'tag',select:[{label:'标签一',value:'oen'},{label:'标签二',value:'two'}],type:'select'},
      //   time:{label:'更新时间',prop:'time',type:'time'},
      //   radio:{label:'单选',prop:'radio',type:'radio',select:[{label:'按钮一',value:1},{label:'按钮二',value:0}]},
      //   price:{label:'价钱',prop:'price',type:'price',left:'',right:''},
      //   slot:{type:'slot',slot:'text',prop:'value'}
      // },//搜索框
      // options: {
      //   baseUrl:'http://47.108.31.116',
      //   fields: {
      //     id: { label: 'ID', prop: 'id', width: '', order: true},
      //     data: { label: '时间', prop: 'date', width: '', order: true },
      //     switch: {
      //       label: '自定义', prop: 'name', width: '', align: 'center', type: 'switch', switchChage: function(scope) {
      //         console.log(scope)
      //       },
      //
      //     },
      //     slot:{slot:'switch',type:'slot',label:'开关'},
      //     address: { label: '地址', prop: 'address', width: '', order: true },
      //     progress: { label: '进度', prop: 'progress', width: '', order: true,type:'progress' },
      //     tag: {
      //       label: '标签',
      //       prop: 'tag',
      //       width: '',
      //       type: 'tag',
      //       attr: 'primary',
      //       effect: 'dark',
      //       filterTag: function(value, row, column) {
      //         return row.tag === value
      //       },
      //       tagDate: [{ text: '家1', value: '家' }, { text: '公司1', value: '公司' }],
      //     },
      //     link: {
      //       label: '链接',
      //       prop: 'link',
      //       width: '',
      //       type: 'link',
      //       linkClick:function(scope){
      //         window.open(scope.row.link)
      //         console.log(scope);
      //       }
      //     },
      //     image: {
      //       label: '图片',
      //       prop: 'url',
      //       width: '',
      //       type: 'image',
      //       sing:',',
      //       style: { width: '30px', height: '30px' },
      //       preview: function(scope,item,index) {
      //         console.log(scope)
      //         console.log(item)
      //         console.log(index)
      //       },
      //     },
      //     button: {
      //       label: '操作', width: '130', type: 'func', fixed: true, edit: function(scope) {
      //         console.log(scope)
      //       }, del: function(scope) {
      //         console.log(scope)
      //       },
      //     },
      //
      //   },
      // },//表格数据
    };
  },
  watch: {
    optionsData: {
      handler: function (newVal) {
        this.initOptions(newVal);
      },
      immediate: true
    },
    ruleForm: {
      handler: function (newVal) {
        this.initRuleForm(newVal);
      },
      immediate: true
    }
  },
  created() {
    if (this.$route.meta.permission) {
      this.permission = this.$route.meta.permission.split(',');
    }
  },
  methods: {


    handleAddUserHeard:function (){
      this.$emit('handleAddUserHeard')
    },

    handleAddUserFace:function(){
      this.$emit('handleAddUserFace',this.allData)
    },

    downloadTemplate: function () {
      this.$emit('downloadTemplate')
    },

    /**
     * 选择导出
     */
    handleHeardSelect: function () {
      this.$emit('handleHeardSelect', {data: this.allData});
    },
    /**
     * 批量导出
     */
    handleHeardBatch: function () {
      this.$emit('handleHeardBatch')
    },


    onUploadSuccess: function (res) {
      this.$emit('onUploadSuccess', res);
    },
    onUploadError: function (res) {
      this.$emit('onUploadError', res);
    },
    onExcelClick: function () {
      this.excelShow = true;
    },

    clearSelection: function () {
      this.$refs.Table.clearSelection();
    },
    toggleSelection: function (val) {
      val.forEach((row) => {
        this.$refs.Table.toggleRowSelection({id: row}, true)
      })
    },
    //点击切换 搜索状态
    clickSearch: function () {
      if (this.isSearch) {
        this.searchAnimate = false;
        setTimeout(() => {
          this.isSearch = false;
        }, 900);
      } else {
        this.isSearch = true;
        this.searchAnimate = true;
      }

    },
    //状态文字类型点击事件回调
    searchStatusText: function (val) {
      this.$emit("searchStatusText", val);
    },
    //表单上方创建时间回调
    handleCreateTimeChange: function (val) {
      this.$emit("handleCreateTimeChange", val);
    },

    //表给上方的刷新按钮回调
    handleHeardRefresh: function () {
      this.$emit("handleHeardRefresh");
    },

    //添加添加数据
    handleHeardAdd: function () {
      this.$emit("handleAdd");
    },
    //表格上方的编辑点击回调
    handleHeardEdit: function () {
      this.$emit("handleHeardEdit", this.allData);
    },

    // 表给上方的删除回调
    handleHeardDel: function () {
      this.$emit("handleHeardDel", this.allData);
      this.$refs.Table.clearSelection();
    },

    //分页
    handlePaginationSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.$emit("handlePaginationSizeChange", val);
    },
    handlePaginationCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.$emit("handlePaginationCurrentChange", val);
    },
    //end
    //搜索回调数据
    searchForm() {
      let data = this.ruleForms;
      //从对象里去对应的数据 做对应的拼接返回出去。
      for (const formNameKey in data) {
        this.searchVal[data[formNameKey]["prop"]] =
          data[formNameKey][data[formNameKey]["prop"]];
        if (data[formNameKey]["type"] === "price") {
          this.searchVal[data[formNameKey]["prop"]] = {
            left: data[formNameKey]["left"],
            right: data[formNameKey]["right"]
          };
        }
      }
      this.$emit("searchForm", this.searchVal);
    },
    //清空搜索
    resetForm() {
      for (const formNameKey in this.ruleForms) {
        if (this.ruleForms[formNameKey]["type"] === "price") {
          delete this.ruleForms[formNameKey]["left"];
          delete this.ruleForms[formNameKey]["right"];
        }
        if (this.ruleForms[formNameKey]["type"] === "slot") {
          if (
            this.ruleForms[formNameKey][this.ruleForms[formNameKey]["prop"]]
          ) {
            this.ruleForms[formNameKey][this.ruleForms[formNameKey]["prop"]] =
              null;
          }
        } else {
          delete this.ruleForms[formNameKey][
            this.ruleForms[formNameKey]["prop"]
            ];
        }
      }
      this.$forceUpdate();
      let obj = {};
      for (const key in this.searchVal) {
        obj[key] = null;
      }
      this.$emit("resetForm", obj);
    },
    //end
    initOptions: function (obj) {
      for (const objKey in obj.fields) {
        obj.fields[objKey]["select"] = true;
      }
      this.options = obj;
    },
    initRuleForm: function (obj) {
      this.ruleForms = obj;
    },
    ValueChange(t, k) {
      this.options.fields[k]["select"] = !t.select;
      this.$forceUpdate();
    },
    // 基础搜索框
    serchChangeInput: function (val) {
      this.$emit("serchChangeInput", val);
    },
    //end

    //验证auth按钮权限
    Authpermission: function (val) {
      // return true;
      // if (this.permission.length === 0) return true;
      return this.permission.includes(val);
    },

    //解决表单中多次出现悬浮提示框
    closePopover: function (index) {
      // 遍历所有的refs，判断索引名中是否有 'popover-' ;如果有，都使用doClose关掉
      for (let i = 0; i < this.$refs['popover_' + index].length; i++) {
        this.$refs["popover_" + index][i].doClose();
      }
      // for (const key in this.$refs) {
      //   console.log(key)
      //   if (key.indexOf('popover_') !== -1) {
      //     this.$refs[key][0].doClose()
      //   }
      // }
    },

    //多图片显示
    burstImageString: function (str, baseUrl, sign = ",") {
      try {
        if (str.indexOf(":") !== -1) {
          return str.split(sign);
        } else {
          let data = [];
          let strArr = str.split(sign);
          for (let i = 0; i < strArr.length; i++) {
            data.push(baseUrl + strArr[i]);
          }
          return data;
        }
      } catch (e) {
        return 0;
      }
    },
    //end

    //表单多选
    handleSelectionChange(val) {
      this.allData = val;
      this.$emit("handleSelectionChange", val);
      if (val.length === 0) {
        this.isDisabledDel = true;
        this.isDisabledEdit = true;
      } else if (val.length !== 0) {
        if (val.length === 1) {
          this.isDisabledDel = false;
          this.isDisabledEdit = false;
        }
        if (val.length > 1) {
          this.isDisabledDel = false;
          this.isDisabledEdit = true;
        }
      }
    },
    //end

    //  重新设置选择状态
    handleCurrentChange: function (val) {

      this.$refs.Table.toggleRowSelection(val);
    }
  }
};
</script>

<style scoped>
.buttonHeard:active {
  opacity: 0.6;
}



.container-dialer-enter-content {
  margin-top: 10px;
}

.container-dialer-enter {
  font-weight: bold;
  display: flex;
  align-items: center;
  font-size: 20px;
}

.container-dialer-enter-item {
  margin-right: 10px;
  height: 30px;
  border-radius: 20px;
  width: 6px;
  background-color: #3a8ee6;
}

>>> .el-upload-dragger {
  width: 260px;
  height: 140px;
}

>>> .el-table__body .el-icon-arrow-right::before {
  content: '';
  font-size: 15px;
}

.table-container {
  padding: 20px;
}

.table-container-button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.table-container-button-right {
  display: flex;
}

.pullData {
  width: 90%;
  padding: 5px;
  cursor: pointer;
}

.pullData:hover {
  background-color: #eef1f6;
}

.table-container-search {
  padding: 20px;
  height: auto;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.table-container-search-item {
  display: flex;
  flex-wrap: wrap;
}

.table-container-pagination {
}
</style>
